<template >
	<div class="img-upload" :id="
      $store.state.oldPage ? 'articlePage_vanList_old' : 'articlePage_vanList'
    ">
		<div class="listWrap" ref="listWrap" :style="{ height: listWrapHeight }">
			<van-list v-model="loading" offset="10" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="item flex-row" v-for="item in dataList" :key="item.id" @click="goDetail(item)">
					<!-- @click="openLink(item.linkUrl)" -->
					<img  :src="item.imgUrl" />
					<div style="flex: 1; position: relative">
						<div class="text1">{{ item.title }}</div>
						<div class="flex-between flex-center" style="position: absolute; bottom: 0; width: 100%">
							<div class="text2">来源：{{ item.srcForm }}</div>
							<div class="text2">{{ item.publicTime }}</div>
						</div>
					</div>
				</div>
			</van-list>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		// dataList: {
		// 	type: Array,
		// 	default: [],
		// },
		listWrapHeight: {
			type: String,
			default: '9rem',
		},
		type: {
			type: String,
			default: 'SCZX',
		},
		apiName: {
			type: String,
			default: 'articlePage_index',
		},
	},
	data() {
		return {
			dataList: [],
			loading: false,
			finished: false,
			searchData: {
				page: 1,
				limit: 5,
				searchKey: '',
				showMore: 'Y',
			},
		};
	},
	created() {},
	mounted() {},
	watch: {},
	methods: {
		goDetail(item) {
			// this.$router.push({path:'/publicPage/detail_publicPage',query:{item:JSON.stringify(item)}})
			this.$router.push({
				path: '/publicPage/detail_publicPage',
				query: { apiName: this.apiName, id: item.id },
			});
		},
		openLink(link) {
			window.location.href = link;
		},
		onSearch(searchKey) {
			this.finished = true;
			this.clearSearchData();
			this.searchData.searchKey = searchKey;
			//   this.$refs.listWrap.top = 0;
			this.articlePage_index(true);
			setTimeout(() => {});
		},
		clearSearchData() {
			this.searchData = {
				page: 1,
				limit: 5,
				searchKey: '',
				showMore: 'Y',
			};
			//   this.finished = false;
			this.dataList = [];
		},
		onLoad() {
			console.log('异步更新数据');
			// 异步更新数据
			this.articlePage_index();
		},
		articlePage_index(finished) {
			// finished 先关闭后开启 以免情况列表产生触底更新数据
			var params = this.searchData;
			params.type = this.type;
			this.$myApi[this.apiName](params).then((res) => {
				if (res.code == 200) {
					this.dataList = [...this.dataList, ...res.data];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						//finished 先关闭后开启 以免情况列表产生触底更新数据
						this.finished = false;
					}
					if (res.data.length < 5) {
						this.finished = true;
					}
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
#articlePage_vanList {
	padding: 0.42rem 0rem;
	.listWrap {
		overflow-x: scroll;
	}
	.item {
		width: 100%;
		margin-bottom: 0.8rem;
		position: relative;
		img {
			width: 1.8rem;
			height: 1.2rem;
			min-height: 1.2rem;
			margin-right: 0.15rem;
		}
		.text1 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 0.28rem;
			color: #111111;
			font-weight: bold;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.23rem;
			width: 50%;
			color: #aaaaaa;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
}
#articlePage_vanList_old {
	.listWrap {
		overflow-x: scroll;
	}
	.item {
		width: 100%;
		margin-bottom: 0.8rem;
		position: relative;
		img {
			width: 1.8rem;
			height: 1.8rem;
			min-height: 1.8rem;
			margin-right: 0.15rem;
		}
		.text1 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 0.4rem;
			color: #111111;
			font-weight: bold;
			margin-bottom: 0.1rem;
		}
		.text2 {
			font-size: 0.2rem;
			width: 50%;
			color: #aaaaaa;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
}
</style>